<template>
  <el-row>
    <el-col :span="2"> &nbsp; 名称：</el-col>
    <el-col :span="4">
      <el-input v-model="findValue.name" placeholder="名称"></el-input>
    </el-col>
    <el-col :span="2"> &nbsp; 地址：</el-col>
    <el-col :span="4">
      <el-input v-model="findValue.address" placeholder="地址"></el-input>
    </el-col>
    <el-col :span="2"> &nbsp; 电话：</el-col>
    <el-col :span="4">
      <el-input v-model="findValue.telephone" placeholder="电话"></el-input>
    </el-col>
  </el-row>

</template>

<script setup lang="ts">
  import { reactive, watch } from 'vue'
    
  // 获取父组件的状态
  import { getListState } from '../state/list'
 
  // 获取查询条件
  const { query }  = getListState()  

  // 记录查询条件
  const findValue = reactive({
    name: '',
    address: '',
    telephone: ''
  })

  watch(findValue, () => {
    // 清空查询条件
    query.array.length = 0
    
    Object.keys(findValue).forEach((key: string) => {
      delete query.mini[key] 
    })

    // 如果输入，记录查询条件
    Object.keys(findValue).forEach((colName: string) => {
      const value = findValue[colName as keyof typeof findValue]
      if (value) {
        query.array.push({colName, value})
        query.mini[colName] = [101, value]
      }
    })
     
  })

  // console.log('state\n', pagerInfo)

</script>